<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import Chat from '@/views/cockpit/components/chat.vue'
import { windowResize } from '@/views/common'
import { getDictionary } from '@/views/science/api/technologyawards'
import type { ECharts } from 'echarts'
import { isSuccess } from '@/views/cockpit/common'
import {
  slBzRequest,
  slGfRequest,
  slJxRequest,
  slRzRequest,
  slThesisRequest,
  slZlRequest,
} from '@/views/cockpit/projectSection/api'

// 专利
const zlValue = ref<string>('')
const zlOptions = ref<Record<string, string>[]>([])
const zlLineX = ref<string[]>([])
const zlLineY = ref<number[]>([])
let zlChat: ECharts
const initZlChat = () => {
  slZlRequest(zlValue.value).then((res) => {
    if (isSuccess(res)) {
      let data = res.data.data || []
      data = data.filter((t) => t.year)
      zlLineX.value = data.map((t) => t.year) || []
      zlLineY.value = data.map((t) => t.num) || []
    } else {
      zlLineX.value = []
      zlLineY.value = []
    }
  })
}
// 软著
const rzValue = ref<string>('')
const rzOptions = ref<Record<string, string>[]>([])
const rzLineX = ref<string[]>([])
const rzLineY = ref<number[]>([])
let rzChat: ECharts
const initRzChat = () => {
  slRzRequest(rzValue.value).then((res) => {
    if (isSuccess(res)) {
      let data = res.data.data || []
      data = data.filter((t) => t.year)
      rzLineX.value = data.map((t) => t.year) || []
      rzLineY.value = data.map((t) => t.num) || []
    } else {
      rzLineX.value = []
      rzLineY.value = []
    }
  })
}
// 论文
const lwValue = ref<string>('')
const lwOptions = ref<Record<string, string>[]>([])
const lwLineX = ref<string[]>([])
const lwLineY = ref<number[]>([])
let lwChat: ECharts
const initLwChat = () => {
  slThesisRequest(lwValue.value).then((res) => {
    if (isSuccess(res)) {
      let data = res.data.data || []
      data = data.filter((t) => t.year)
      lwLineX.value = data.map((t) => t.year) || []
      lwLineY.value = data.map((t) => t.num) || []
    } else {
      lwLineX.value = []
      lwLineY.value = []
    }
  })
}
// 技术标准
const bzValue = ref<string>('')
const bzOptions = ref<Record<string, string>[]>([])
const bzLineX = ref<string[]>([])
const bzLineY = ref<number[]>([])
let bzChat: ECharts
const initBzChat = () => {
  slBzRequest(bzValue.value).then((res) => {
    if (isSuccess(res)) {
      let data = res.data.data || []
      console.log(data,'slBzRequest');
      data = data.filter((t) => t.year)
      bzLineX.value = data.map((t) => t.year) || []
      bzLineY.value = data.map((t) => t.num) || []
    } else {
      bzLineX.value = []
      bzLineY.value = []
    }
  })
}
// 技术工法
const gfValue = ref<string>('')
const gfOptions = ref<Record<string, string>[]>([])
const gfLineX = ref<string[]>([])
const gfLineY = ref<number[]>([])
let gfChat: ECharts
const initGfChat = () => {
  slGfRequest(gfValue.value).then((res) => {
    if (isSuccess(res)) {
      let data = res.data.data || []
      data = data.filter((t) => t.year)
      gfLineX.value = data.map((t) => t.year) || []
      gfLineY.value = data.map((t) => t.num) || []
    } else {
      gfLineX.value = []
      gfLineY.value = []
    }
  })
}
// 科技奖项
const jxValue = ref<string>('')
const jxOptions = ref<Record<string, string>[]>([])
const jxValue2 = ref<string>('')
const jxOptions2 = ref<Record<string, string>[]>([])
const jxLineX = ref<string[]>([])
const jxLineY = ref<number[]>([])
let jxChat: ECharts
const initLevelJx = () => {
  const options = (jxOptions2.value.find((t) => t.itemValue === jxValue2.value)?.children ||
    []) as Record<string, string>[]
  jxValue.value = ''
  console.log('options', options)

  jxOptions.value = options
  initJxChat()
}
const initJxChat = () => {
  // const end = jxValue.value?.length ? jxValue.value[jxValue.value.length - 1] : "";
  const end = jxValue.value

  slJxRequest(jxValue2.value, end).then((res) => {
    if (isSuccess(res)) {
      let data = res.data.data || []
      data = data.filter((t) => t.type)
      jxLineX.value = data.map((t) => t.type) || []
      jxLineY.value = data.map((t) => t.num) || []
    } else {
      jxLineX.value = []
      jxLineY.value = []
    }
  })
}

const changeChat = (chat: ECharts, type: string) => {
  if (type === 'zlChat') zlChat = chat
  if (type === 'rzChat') rzChat = chat
  if (type === 'lwChat') lwChat = chat
  if (type === 'bzChat') bzChat = chat
  if (type === 'gfChat') gfChat = chat
  if (type === 'jxChat') jxChat = chat
}
const initOptions = () => {
  getDictionary([
    'KJSL_ZL_LEVEL',
    'KJSL_BUSINESS_SECTOR',
    'KJSL_THESIS_LEVEL',
    'KJSL_STANDARD_LEVEL_CATEGORY',
    'KJSL_CONSTRUCTION_METHOD_LEVEL_CATEGORY',
    'KHGL_KJSL_HJJB',
  ]).then((res) => {
    if (isSuccess(res)) {
      const data = res.data.data || {}
      // 专利等级
      zlOptions.value = data.KJSL_ZL_LEVEL || []
      // 软著状态
      rzOptions.value = data.KJSL_BUSINESS_SECTOR || []
      // 论文
      lwOptions.value = data.KJSL_THESIS_LEVEL || []
      // 技术标准
      bzOptions.value = data.KJSL_STANDARD_LEVEL_CATEGORY || []
      // 技术功法
      gfOptions.value = data.KJSL_CONSTRUCTION_METHOD_LEVEL_CATEGORY || []
      // 奖项级别
      jxOptions2.value = data.KHGL_KJSL_HJJB || []
    }
  })
}
const windowEvent = () => {
  windowResize(300, () => {
    if (zlChat) zlChat.resize()
    if (rzChat) rzChat.resize()
    if (lwChat) lwChat.resize()
    if (bzChat) bzChat.resize()
    if (gfChat) gfChat.resize()
    if (jxChat) jxChat.resize()
  })
}
onMounted(() => {
  initOptions()
  initZlChat()
  initRzChat()
  initLwChat()
  initBzChat()
  initGfChat()
  initJxChat()
  window.addEventListener('resize', () => {
    windowEvent()
  })
})
onUnmounted(() => {
  window.removeEventListener('resize', windowEvent)
})
</script>

<template>
  <div class="chartContent">
    <div class="row mb10">
      <div class="modal">
        <el-select
          v-model="zlValue"
          clearable
          class="m-2 searchItem searchRight"
          placeholder="请选择专利等级"
          @change="initZlChat"
        >
          <el-option
            v-for="item in zlOptions"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          />
        </el-select>
        <span class="title">专利</span>
        <chat
          :line-x="zlLineX"
          :line-y="zlLineY"
          :slider="true"
          description="专利"
          color="#0291D1"
          :changeChat="changeChat"
          type="zlChat"
        ></chat>
      </div>
      <div class="modal">
        <el-select
          v-model="rzValue"
          clearable
          class="m-2 searchItem searchRight"
          placeholder="请选择等级"
          @change="initRzChat"
        >
          <el-option
            v-for="item in rzOptions"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          />
        </el-select>
        <span class="title">软著</span>
        <chat
          type="rzChat"
          :changeChat="changeChat"
          :line-x="rzLineX"
          :line-y="rzLineY"
          description="软著"
          color="#4DBB94"
        ></chat>
      </div>
      <div class="modal">
        <el-select
          v-model="lwValue"
          clearable
          class="m-2 searchItem searchRight"
          placeholder="请选择级别"
          @change="initLwChat"
        >
          <el-option
            v-for="item in lwOptions"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          />
        </el-select>
        <span class="title">论文</span>
        <chat
          type="lwChat"
          :changeChat="changeChat"
          :line-x="lwLineX"
          :line-y="lwLineY"
          description="论文"
          color="#A571E0"
        ></chat>
      </div>
    </div>
    <div class="row">
      <div class="modal">
        <el-select
          v-model="bzValue"
          clearable
          class="m-2 searchItem searchRight"
          placeholder="请选择级别"
          @change="initBzChat"
        >
          <el-option
            v-for="item in bzOptions"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          />
        </el-select>
        <span class="title">技术标准</span>
        <chat
          type="bzChat"
          :changeChat="changeChat"
          :line-x="bzLineX"
          :line-y="bzLineY"
          description="技术标准"
          color="#519BBD"
        ></chat>
      </div>
      <div class="modal">
        <el-select
          v-model="gfValue"
          clearable
          class="m-2 searchItem searchRight"
          placeholder="请选择级别"
          @change="initGfChat"
        >
          <el-option
            v-for="item in gfOptions"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          />
        </el-select>
        <span class="title">技术工法</span>
        <chat
          type="gfChat"
          :changeChat="changeChat"
          :line-x="gfLineX"
          :line-y="gfLineY"
          description="技术工法"
          color="#C7A746"
        ></chat>
      </div>
      <div class="modal">
        <!-- <div class="searchItem searchRight">
        <el-cascader :options="jxOptions"
                     :props="{
        value: 'itemValue',
        label: 'itemText'
      }" clearable v-model="jxValue" @change="initJxChat" />
      </div> -->
        <span class="title">科技奖项</span>

        <el-select
          v-model="jxValue2"
          clearable
          class="m-2 searchItem searchLeft level"
          placeholder="奖项级别"
          @change="initLevelJx"
        >
          <el-option
            v-for="item in jxOptions2"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          />
        </el-select>
        <el-select
          v-model="jxValue"
          clearable
          class="m-2 searchItem searchRight"
          placeholder="奖项类别"
          @change="initJxChat"
        >
          <el-option
            v-for="item in jxOptions"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          />
        </el-select>

        <chat
          type="jxChat"
          :changeChat="changeChat"
          :line-x="jxLineX"
          :line-y="jxLineY"
          description="科技奖项"
          color="#8080FF"
        ></chat>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/css/theme';
@import '../../common';
.chartContent {
  flex-direction: column;
  .row,
  .modal {
    display: flex;
    flex: 1 1 0;
    overflow: hidden;
  }
  .modal {
    position: relative;
    margin-right: 10px;
    padding: 2vh;
    padding-top: 3vh;
    &:last-child {
      margin-right: 0;
    }
    background-image: url(../../img/echars-bg.png);
    background-size: 100% 100%;
    .title {
      position: absolute;
      top: 3vh;
      flex: 0;
      color: aliceblue;
    }
    .el-select {
      width: 6.5vw;
      position: absolute;
      top: 3vh;
      flex: 0;
    }
    .level{
      left: 50%;
    }
    :deep(.el-select .el-input--small .el-input__inner) {
      border: none;
      color: aliceblue;
      background-color: #192e6e !important;
    }
  }
}
:deep(.el-select-dropdown__list) {
  background-color: #192e6e !important;
}
</style>
